/* 首页样式 */
@import "_fun.less";
header {
    .bc(#cf4cff);
    .p(0, 30, 0, 30);
    .oh();
    .scan {
        .fl();
        background-image: url("../img/home_scan.png");
        .w(60);
        .h(70);
        .bgs(60,
        70);
        .m(8,
        0,
        8,
        8);
    }
    form {
        .w(500);
        .oh();
        .fl();
        .bdr(25);
        .h(50);
        .m(18,
        44,
        18,
        26);
        .bc(#fff);
        input {
            outline: none;
            .fl();
            .bn();
            .lh(50);
            .h(50);
            .w(430);
            .bc(#fff);
            .ti(38);
            .fs(26);
            .c(#616161);
        }
        button {
            .fl();
            background: url("../img/home_search_btn_06.png") transparent;
            .w(30);
            .h(30);
            .bs(30,
            30);
            .bn();
            .mt(10);
        }
    }
    .message {
        .fl();
        background-image: url("../img/home_message.png");
        .w(42);
        .h(70);
        .bgs(42,
        70);
        .mt(9);
    }
}

.banner {
    .w(750);
    .oh();
    .pr();
    ul {
        .pr;
        .l(0);
        .oh();
        .w(3000);
        li {
            .w(750);
            .fl();
            img {
                .w(750);
            }
        }
    }
    ol {
        .w(60);
        .h(26);
        .br(13);
        .bc(#e4e4e4);
        .pa;
        .l(325);
        .b(10);
        opacity: 0.6;
        .p(0,
        20,
        0,
        20);
        li {
            .fl;
            .mt(7);
            .m(7,
            3,
            7,
            3);
            background-image: url("../img/banner_dot1.png");
            .w(13);
            .h(13);
            .bgs(13,
            13);
        }
        .on {
            background-image: url("../img/banner_dot2.png");
        }
    }
}

.swiper-container {
    width: 100%;
    .pr;
    .swiper-slide {
        width: 100%;
        img {
            width: 100%;
        }
    }
    .swiper-pagination-bullets {
        .w(60);
        .h(26);
        .br(13);
        .bc(#e4e4e4);
        .pa;
        .l(325);
        .b(10);
        opacity: 0.6;
        .p(0,
        20,
        0,
        20);
        .swiper-pagination-bullet {
            .fl;
            .mt(7);
            .m(7,
            3,
            7,
            3);
            background-image: url("../img/banner_dot1.png");
            .w(13);
            .h(13);
            .bgs(13,
            13);
        }
        .swiper-pagination-bullet-active {
            background-image: url("../img/banner_dot2.png");
        }
    }
}

.nav {
    .p(30,
    30,
    30,
    30);
    .oh;
    li {
        .fl;
        .w(150);
        .p(10,
        0,
        10,
        0);
        .ml(30);
        .bc(#9f40ff);
        .br(36);
        &:nth-of-type(1){
            .ml(0);
        }
        img {
            .w(72);
            .h(72);
            .db;
            margin: 0 auto;
        }
        span {
            .db;
            .w(150);
            .tc;
            .c(#fff);
            .fs(24);
            .lh(24);
            .mt(10);
        }
    }
}

.headline {
    .p(0,
    30,
    0,
    30);
    .bc(#d666ff);
    .pr;
    b {
        .dib;
        .p(18,
        18,
        18,
        18);
        text-align: justify;
        .w(66);
        .h(66);
        .c(#fff);
        .fs(28);
        .lh(34);
    }
    i {
        .dib;
        .c(#fcf5ff);
        .fs(20);
        .lh(24);
        .mb(18);
        .ml(8);
    }
    img {
        .w(246);
        .h(110);
        .pa;
        .l(400);
        .b(0);
    }
}

.middle {
    .bc(#f8e5ff);
    .p(32,
    30,
    0,
    30);
    .hot {
        .w(690);
        .h(319);
        .pr;
        background: url("../img/home_hot_bg.png");
        .bgs(691,
        319);
        img {
            .pa;
            .t(38);
            .r(34);
            .w(273);
            .h(239);
        }
        h3 {
            .pa;
            .t(0);
            .l(0);
            .fl;
            .bdr(18);
            .w(150);
            .lh(50);
            .bc(#cf4cff);
            .tc;
            .c(#fff);
            .fs(24);
        }
        .titleM {
            .pa;
            .t(60);
            .l(70);
            .db;
            .w(320);
            .fs(32);
            .c(#fff);
            .lh(46);
        }
        .title {
            .fs(24);
            font-family: 宋体;
            color: #ebf1f2;
            .lh(24);
            .pa;
            .t(166);
            .l(70);
        }
        .price {
            .pa;
            .t(204);
            .l(70);
            .c(#ff3352);
            .fs(24);
            em {
                .fs(40);
            }
        }
        .buy {
            .pa;
            .b(22);
            .l(70);
            .w(122);
            .lh(40);
            .tc;
            .bc(#ff3352);
            .bdr(12);
            .c(#ffd6dc);
            .fs(24);
        }
    }
    .boom,
    .new {
        .w(690);
        .h(312);
        .bdr(36);
        background: #0aa6ee;
        .mt(32);
        .pr;
        h3 {
            .pa;
            .t(0);
            .l(0);
            .fl;
            .bdr(18);
            .w(150);
            .lh(50);
            .bc(#cf4cff);
            .tc;
            .c(#fff);
            .fs(24);
        }
        img {
            .pa;
            .t(86);
            .l(64);
            .w(235);
            .h(179);
        }
        .titleM {
            .pa;
            .l(350);
            .t(60);
            .fs(32);
            .lh(44);
            .c(#fff);
        }
        .title {
            .fs(24);
            font-family: 宋体;
            color: #ebf1f2;
            .lh(24);
            .pa;
            .t(170);
            .l(350);
        }
        .price {
            .pa;
            .t(204);
            .l(350);
            .c(#ff3352);
            .fs(24);
            em {
                .fs(40);
            }
        }
        .buy {
            .pa;
            .b(10);
            .l(350);
            .w(122);
            .lh(40);
            .tc;
            .bc(#ff3352);
            .bdr(12);
            .c(#ffd6dc);
            .fs(24);
        }
    }
    .new {
        .h(316);
        background: #dd7fff;
        .buy {
            .b(14);
        }
        img {
            .w(216);
            .h(232);
            .t(74);
        }
    }
}

.guess {
    .w(690);
    .h(320);
    .m(46,
    30,
    98,
    30);
    .mt(46);
    .bc(#dd7fff);
    .bdr(22);
    .pr;
    h3 {
        .pa;
        .t(0);
        .l(0);
        .fl;
        .bdr(18);
        .w(150);
        .lh(50);
        .bc(#cf4cff);
        .tc;
        .c(#fff);
        .fs(24);
    }
    ul {
        .pa;
        .oh;
        .l(26);
        .t(58);
        .w(640);
        li {
            .fl;
            .w(300);
            .bc(#fff);
            .pb(6);
            .ml(40);
            &:nth-of-type(1){
                .ml(0);
            }
            img {
                .dib;
                .w(300);
            }
            b {
                .fl;
                .dib;
                .w(164);
                .tc;
                .fs(24);
                .lh(40);
                .c(#333333);
            }
            .buy {
                .dib;
                .lh(40);
                .w(122);
                .c(#ffd6dc);
                .fs(24);
                .tc;
                .bc(#ff3352);
                .bdr(14);
            }
        }
        
    }
}

footer {
    .bc(#ebb2ff);
    .w(690);
    .db();
    .h(98);
    .pf();
    bottom: 0;
    left: 0;
    .p(0,
    30,
    0,
    30);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .option1 i {
        background: url("../img/home_f_index.png") no-repeat;
        .w(46);
        .h(46);
        .bgs(46,
        46);
    }
    .option2 i {
        background: url("../img/home_f_class.png") no-repeat;
        .bgs(46,
        46);
        .w(46);
        .h(46);
    }
    .option3 i {
        background: url("../img/home_f_shopcart.png") no-repeat;
        .bgs(51,
        46);
        .w(51);
        .h(46);
    }
    .option4 i {
        background: url("../img/home_f_user.png") no-repeat;
        .bgs(41,
        46);
        .w(41);
        .h(46);
    }
    .option1,
    .option2,
    .option3,
    .option4 {
        .fl();
        .w(78);
        .mt(8);
        i {
            .db();
            margin: 0 auto;
        }
        b {
            .db();
            .tc();
            .lh(24);
            .w(78);
            .fs(20);
            .mt(10);
            .c(#333333);
        }
    }
}